<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            font-size: 40px;
            color: #000;
        }

        #container {
            width: 680px;
            height: 424px;
            /* border: 1px solid red; */
            margin: 100px auto;
        }

        ul li {
            list-style: none;
        }

        #container ul {
            margin: 10px auto;
            margin-left: 27px;
            width: 600px;
            height: 74px;
            /* border: 1px solid red; */
            overflow: hidden;

            clear: both;

        }

        /* #container ul * {
            border: 1px solid red;

        } */

        #container ul li {
            float: left;
            margin-top: 4px;
            width: 190px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            margin-right: 12px;
            background: #ccc;
        }

        #container ul li:nth-child(3) {
            /* background: red; */
            margin-right: 0;
        }

        #container ul .active {
            background: blue;
            box-sizing: border-box;
            /* box-shadow: 4px 4px 4px #ccc; */
            border: 6px solid #767676;
            line-height: 60px;
        }

        #container .main {
            margin: 10px auto;
            width: 610px;
            height: 314px;
            /* border: 8px dotted yellow; */
        }

        #arr {
            position: relative;
            top: 45%;
            left: auto;
            font-size: 40px;
            line-height: 40px;
            text-align: center;

        }



        #arr .Right {
            position: absolute;
            /* border: 1px solid #000; */
            right: 0px;

            width: 80px;
            height: 40px;
        }

        #arr .Left {
            position: absolute;
            /* border: 1px solid #000; */
            left: 0;

            width: 80px;
            height: 40px;
        }

        p {
            font-size: 40px;
            margin: 20px;
            display: none;
        }

        #container .main .p4 {
            display: block;
        }
    </style>
</head>

<body>
    <div id="container">
        <ul>
            <li>
                <a href="#p1">选项卡1</a>
            </li>
            <li>
                <a href="#p2">选项卡2</a>
            </li>
            <li class="ac-tive">
                <a href="#p3">选项卡3</a>
            </li>
        </ul>
        <div class="main">
            <p class="p-4">花儿开了</p>
            <p>花儿谢了</p>
            <p>花儿没了</p>
            <div id="arr">
                <span class="Left">←</span>
                <span class="Right">→</span>

            </div>

        </div>
    </div>
    <script>
        // 分析：
        // 1.当鼠标点击li时,li添加active样式，并且p添加P4样式
        //    2.当鼠标点击右箭头,选中的li向右进一步
        // 获取arr
        var arr = $('#arr')[0];
        let ps = $("p");
        
        // console.log(arr);
        // 获取li
        let lis = $("li");

        // 获取右箭头
        let Right = $(".Right")[0];
        let count = lis.length;
        // console.log(count)
        // 获取左箭头
        let Left = $(".Left")[0];

        let ul = document.getElementsByTagName("ul")[0];

        for (let i = 0; i < count; i++) {
            // var num = i;
            lis[i].onclick = function () {
                let li = lis[i];
                li.setAttribute('index', i);

                if (lis[i].className == '') {

                    lis[i].className = "active";
                    ps[i].className = "p4";
                    arr.style.top = "15%";
                    ps[(i + 1) % 3].className = "";
                    ps[(i + 2) % 3].className = "";
                    lis[(i + 1) % 3].className = "";
                    lis[(i + 2) % 3].className = "";
                } else {
                    arr.style.top = "45%";
                    lis[i].className = "";
                    ps[i].className = "";
                }
                var liIndex = +(this.getAttribute('index'));
                console.log(liIndex);
                liIndex = num;
            }


        }



        var num = 0;
       // 右箭头点击
        Right.onclick = function () {
            // lis[0].onclick();

            num = num < 0 ? 0 : num;
            num = num >= 3 ? num % 3 : num;
            num = num == 0 ? 0 : num;
            if (num == 3) {
                num == 1;
            }


            console.log(num);
            lis[num].onclick();
            num++;
        }
        // 左箭头点击
        Left.onclick = function () {
            num--;

            if (num == 3) {
                num = 2;
            }

            if (num < 0) {
                num = 2;
            }
            console.log(num);
            lis[num].onclick();

        }
        // 克隆第一个li 
        var firstLi = lis[0];
        var cloneli = firstLi.cloneNode(true);
        ul.append(cloneli);
        
        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>